//国调
var dataList = [{
		name: "南海诸岛",
		value: 0
	},
	{
		name: '北京',
		value: 1
	},
	{
		name: '天津',
		value: 1
	},
	{
		name: '上海',
		value: 1
	},
	{
		name: '重庆',
		value: 1
	},
	{
		name: '河北',
		value: 1
	},
	{
		name: '河南',
		value: 1
	},
	{
		name: '云南',
		value: 0
	},
	{
		name: '辽宁',
		value: 1
	},
	{
		name: '黑龙江',
		value: 1
	},
	{
		name: '湖南',
		value: 1
	},
	{
		name: '安徽',
		value: 1
	},
	{
		name: '山东',
		value: 1
	},
	{
		name: '新疆',
		value: 1
	},
	{
		name: '江苏',
		value: 1
	},
	{
		name: '浙江',
		value: 1
	},
	{
		name: '江西',
		value: 1
	},
	{
		name: '湖北',
		value: 1
	},
	{
		name: '广西',
		value: 0
	},
	{
		name: '甘肃',
		value: 1
	},
	{
		name: '山西',
		value: 1
	},
	{
		name: '内蒙古',
		value: 1
	},
	{
		name: '陕西',
		value: 1
	},
	{
		name: '吉林',
		value: 1
	},
	{
		name: '福建',
		value: 0
	},
	{
		name: '贵州',
		value: 1
	},
	{
		name: '广东',
		value: 0
	},
	{
		name: '青海',
		value: 1
	},
	{
		name: '西藏',
		value: 1
	},
	{
		name: '四川',
		value: 1
	},
	{
		name: '宁夏',
		value: 1
	},
	{
		name: '海南',
		value: 0
	},
	{
		name: '台湾',
		value: 0
	},
	{
		name: '香港',
		value: 0
	},
	{
		name: '澳门',
		value: 0
	}
];
var option = {
	backgroundColor: '#219DBA',
	title: {
		show: true,
		left: 'center',
		textStyle: {
			color: '#00B4A0',
			fontSize: 36,
		}
	},
	tooltip: {
		trigger: 'item',
	},
	geo: {
		map: 'zh',
		roam: false, //是否开启平游或缩放
		zoom: 1,
		top: "70px",
		itemStyle: {
			normal: {
				borderColor: 'rgb(0,236,239)',
				borderWidth: 1.5,
				shadowColor: 'rgb(0,236,239)',
				//shadowOffsetX: 0,
				//shadowOffsetY: 4,
				shadowBlur: 10,
			},
		},
		label: {
			normal: {
				show: false,
			},
			emphasis: {
				show: false
			}
		},
	},
	series: [{
		type: 'map',
		map: 'zh',
		geoIndex: 1, //1的时候series地图控制，0的时候geo控制
		top: "70px",
		data: dataList,
		label: {
			normal: {
				show: false,
				color: "#333333",
			},
			emphasis: {
				show: false,
				color: "#333333",
			}
		},
	}, {
		type: 'effectScatter',
		coordinateSystem: 'geo',
		symbolSize: 10,
		showEffectOn: 'render',
		rippleEffect: {
			brushType: 'stroke'
		},
		hoverAnimation: true,
		label: {
			normal: {
				show: false,
			},
			emphasis: {
				show: false,
			}
		},
		itemStyle: {
			normal: {
				color: '#FB062E',
				shadowBlur: 10,
				shadowColor: '#FB062E'
			}
		},
		zlevel: 1
	}, ]
}
//处理地图颜色
function checkColor(data) {
	var dataList = data.map(function(item) {
		if (item.value == 0) {
			item.itemStyle = {
				normal: {
					areaColor: '#E4E6E7',
					borderColor: '#fff',
					borderWidth: 1
				},
				emphasis: {
					areaColor: '#E4E6E7',
					borderColor: '#fff',
					borderWidth: 1
				}
			}
			item.label = {
				show: false
			}
			item.tooltip = {
				formatter: function(params) {
					return "";
				}
			}
		} else {
			item.itemStyle = {
				normal: {
					areaColor: '#98E7DE',
					borderColor: '#fff',
					borderWidth: 1
				},
				emphasis: {
					areaColor: '#1accb8',
					borderColor: '#fff',
					borderWidth: 1
				}
			}
			item.tooltip = {
				formatter: function(params) {
					var str = "<div>涉及产品 2/4</div>";
					str += "<div>涉及主/厂站系统 3/6</div>";
					str += "<div>涉及主/厂站主机 3/6</div>";
					str += "<div>发布漏洞 4/10</div>";
					return str;
				}
			}
		}
		return item;
	});
	return dataList;
}
//字段要和kgo-scroll-head 下的div的name属性一一对应
layui.use('form', function() {
	var x;
	try {
		x = parent.FrameWHToChildren();
	} catch (err) {
		x = document.documentElement.clientHeight;
	}
	$("#body").css("height", x - 5);
	init();
});

function init() {
	initTable();
	setMap(); //画国调地图
	productTop10();
}

function initTable(){
	layui.use('table', function(){
	  var table = layui.table;
	  
	  //展示已知数据
	  table.render({
	    elem: '#demo'
	    ,cols: [[ //标题栏
	      {field: 'id', title: ''}
	      ,{field: 'username', title: '江苏政采'}
	      ,{field: 'email', title: '瑞星'}
	      ,{field: 'sign', title: '江民'}
	      ,{field: 'sex', title: '绿盟'}
	    ]]
	    ,data: [{
	      "id": "客户端"
	      ,"username": "V2.1.1"
	      ,"email": "V2.1.1"
	      ,"sex": "V2.1.1"
	      ,"sign": "V2.1.1"
	    }, {
	      "id": "流量分析设备"
	      ,"username": "V2.1.1"
	      ,"email": "V2.1.1"
	      ,"sex": "V2.1.1"
	      ,"sign": "V2.1.1"
	    }, {
	      "id": "分析模块"
	     ,"username": "V2.1.1"
	     ,"email": "V2.1.1"
	     ,"sex": "V2.1.1"
	     ,"sign": "V2.1.1"
	    }]
	    //,skin: 'line' //表格风格
	    ,even: true
	    //,page: true //是否显示分页
	    //,limits: [5, 7, 10]
	    //,limit: 5 //每页默认显示的数量
	  });
	});
}
//画地图
function setMap() {
	var mapBox = echarts.init(document.getElementById('nodeChart1'));
	$.get('./js/china.json', function(json) {
		echarts.registerMap('zh', json);
		var gtOption = jQuery.extend(true, {}, option);
		//国调配置
		gtOption.geo.label.normal.show = false;
		gtOption.geo.label.emphasis.show = false;
		gtOption.series[0].data = checkColor(dataList);
		mapBox.setOption(gtOption);
		mapBox.on('click', function (params) {
			console.log(params);
		});
	});

}
//产品排行top10
function productTop10() {
	var data = [{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
	]
	var colorArr = [{
			top: '#FF9A22', //黄色
			bottom: '#FFD56E'
		},
		{
			top: '#33B9F4', //蓝色
			bottom: '#33B9F4'
		}
	];
	var option = {
		tooltip: {},
		backgroundColor: '#71B9D5',
		grid: {
			top: '20px',
			right: '20px',
			left: '50px',
			bottom: '30px'
		},
		xAxis: [{
			type: 'category',
			color: '#767575',
			data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
			axisLabel: {
				color: '#767575',
				textStyle: {
					fontSize: 14
				},
				margin: 0
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(107,107,107,0.37)',
				}
			},
			axisTick: {
				show: false
			},
		}],
		yAxis: [{
			axisLabel: {
				//formatter: '{value}%',
				color: '#767575',
				textStyle: {
					fontSize: 12
				},
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(107,107,107,0.37)',
				}
			},
			axisTick: {
				show: false
			},
			splitLine: {
				lineStyle: {
					color: 'rgba(131,101,101,0.2)',
					type: 'dashed',
				}
			}
		}],
		series: [{
			type: 'bar',
			data: data,
			barWidth: '12px',
			itemStyle: {
				normal: {
					color: function(params) {
						let num = colorArr.length;
						return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: colorArr[params.dataIndex % num].top // 0% 处的颜色
						}, { //可根据具体情况决定哪根柱子显示哪种颜色
							offset: 1,
							color: colorArr[params.dataIndex % num].bottom // 100% 处的颜色
						}], false)
					},
					barBorderRadius: [30, 30, 0, 0],
				}
			},
			label: {
				normal: {
					show: false,
				}
			}
		}]
	};
	var productTop = echarts.init(document.getElementById('gTop'));
	productTop.setOption(option);
}



$(function() {
	windowSizeAuto();
});
//rem自适应，页面适配
function windowSizeAuto() {
	var whdef = 100 / 1720; // 表示1920的设计图,使用100PX的默认值
	var wH = window.innerHeight; // 当前窗口的高度
	var wW = window.innerWidth; // 当前窗口的宽度
	console.log(wW);
	var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
	$('html').css('font-size', rem + "px");
}

$(document).on('click', '#switch-place button', function() {
	$(this).addClass('selected').siblings().removeClass('selected');
	setMap($(this).index() + 1);
})


$(window).resize(function() {
	windowSizeAuto();
});